.tikoCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.599);
  border-radius: 5px;
  font-family: myHarmonyFont;
  font-weight: bold;
  padding: 12px;
  transition: ease 0.2s;
  gap: 12px;
  cursor: default;
}

.tikoCard:hover {
  transform: translateY(-3px);
}

.hitokoto {
  font-size: 52px;
  color: rgba(45, 46, 46, 0.893);
}

.from {
  font-size: 19px;
  color: rgba(101, 102, 103, 0.893);
}

.littleBox {
  cursor: pointer;
}

.iconBox {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}

#liked {
  background-color: #c0f6ec;
  color: #C97081;
}

#a {
  background-color: #EBDFB7;
}

#a:hover {
  box-shadow: 1px 1px 8px 2px #EBDFB7;
}

#b {
  background-color: #d79e8a;
}

#b:hover {
  box-shadow: 1px 1px 8px 2px #d79e8a;
}

#c {
  background-color: #C97081;
}

#c:hover {
  box-shadow: 1px 1px 8px 2px #C97081;
}

#d {
  background-color: #D29289;
}

#d:hover {
  box-shadow: 1px 1px 8px 2px #D29289;
}

#e {
  background-color: #D9C391;
}

#e:hover {
  box-shadow: 1px 1px 8px 2px #D9C391;
}

#f {
  background-color: #C5A37C;
}

#f:hover {
  box-shadow: 1px 1px 8px 2px #C5A37C;
}

#g {
  background-color: #c7a6db;
}

#g:hover {
  box-shadow: 1px 1px 8px 2px #c7a6db;
}

#l {
  background-color: #fab2b1;
}

#l:hover {
  box-shadow: 1px 1px 8px 2px #fab2b1;
}

#h {
  background-color: #e3f6c0;
}

#h:hover {
  box-shadow: 1px 1px 8px 2px #e3f6c0;
}

#i {
  background-color: #c0f6ec;
}

#i:hover {
  box-shadow: 1px 1px 8px 2px #c0f6ec;
}

#j {
  background-color: #dbc0f6;
}

#j:hover {
  box-shadow: 1px 1px 8px 2px #dbc0f6;
}

#k {
  background-color: #f6c0e0;
}

#k:hover {
  box-shadow: 1px 1px 8px 2px #f6c0e0;
}

#l {
  background-color: #e7f6c0;
}

#l:hover {
  box-shadow: 1px 1px 8px 2px #e7f6c0;
}
